<template>
  <div class="resource-manage">

    <div class="resource-group-container">
      <div class="group-header">
        我的分组
        <Button class="float-right" type="text" size="small" @click="openResourceGroupForm('add')">
          <Icon type="md-add" size="18"/>
        </Button>
        <div class="clearfix"></div>
      </div>
      <div class="m-b-5px"></div>
      <div class="group-item" :class="{'active': currentSelectGroupId == ''}" @click="selectGroup('')">
        所有资源
      </div>
      <div class="group-item" :class="{'active': currentSelectGroupId == group.id}" v-for="group in resourceGroupList" :key="group.id"
           @click="selectGroup(group.id)">
        {{ $PnUtil.cutString(group.name, 10) }}
        <div class="group-item-operation-wrap" :title="group.name">
          <Icon class="m-r-5px" type="md-create" @click.stop="openResourceGroupForm('edit', group.id)"/>
          <Icon type="md-trash" @click.stop="deleteResourceGroup(group.id)"/>
        </div>
      </div>
    </div>
    <div class="resource-container">
      <Button class="m-r-5px" type="primary" icon="md-cloud-upload" @click="openUploadResourceModal">上传资源</Button>
      <Tooltip placement="top" content="刷新数据">
        <Button class="m-r-5px" type="primary" @click="loadResourceList">
          <Icon type="md-refresh"/>
        </Button>
      </Tooltip>
      <div class="m-b-10px"></div>

      <Row :gutter="15">
        <i-col v-for="resource in resourceList" :key="resource.id" :xs="24" :sm="12" :md="12" :xl="6" :xxl="4">
          <div class="page-card">
            <div class="img-wrap">
              <img v-if="resource.relative_path" class="page-thumbnail" style="cursor: pointer;"
                   :src="$PnUtil.buildImageSrc(resource.relative_path)" v-viewer="{toolbar: false, navbar: false}"/>

            </div>
            <div class="footer">
              <p class="float-left" :title="resource.original_file_name">
                {{ $PnUtil.cutString(resource.original_file_name, 18) }}
              </p>
              <div class="operation-wrap">
                <div class="operation-btns-wrap">
                  <Tooltip content="拷贝相对路径" placement="top">
                    <a href="javascript:;" @click="copyResourceRelativePath(resource.relative_path)">
                      <Icon custom="iconfont icon-copy-link" size="18"/>
                    </a>
                  </Tooltip>
                  <Tooltip content="删除" placement="top">
                    <a href="javascript:;" @click="deletePnResource(resource.id)">
                      <Icon type="md-trash" size="18" style="top: 3px;"/>
                    </a>
                  </Tooltip>
                </div>
              </div>
              <div class="clearfix"></div>
            </div>
          </div>
        </i-col>
      </Row>
      <div class="none-alert" v-if="resourceList.length == 0">
        <Icon type="ios-alert-outline" size="150"/>
        <p>找不到相关资源数据</p>
      </div>

      <Divider :style="{marginTop: '0px', marginBottom: '10px'}"/>
      <Page size="small" class="float-right" :total="pageTotal" :current.sync="pageIndex" :page-size="pageSize"
            show-elevator show-total @on-change="loadResourceList">
      </Page>
    </div>

    <ResourceGroupForm ref="resourceGroupForm" @refreshDataList="loadResourceGroupList"></ResourceGroupForm>

    <UploadResourceModal ref="uploadResourceModal" @completeUpload="loadResourceList"></UploadResourceModal>

  </div>
</template>

<script>
import ManageMixin from '@/mixin/ManageMixin'
import ResourceGroupForm from "@/views/components/admin/resource/ResourceGroupForm";
import UploadResourceModal from "@/views/components/admin/resource/UploadResourceModal";

export default {
  name: "ResourceManage",
  components: {UploadResourceModal, ResourceGroupForm},
  mixins: [ManageMixin],
  data() {
    return {
      pageSize: 25,
      currentSelectGroupId: '',
      resourceGroupList: [],
      resourceList: []
    }
  },
  mounted() {
    this.loadResourceGroupList()
    this.loadResourceList()
  },
  methods: {

    loadResourceGroupList() {
      this.$PnApi.ResourceApi.getMyAllPnResourceGroup().then(result => {
        this.resourceGroupList = result.data.payload
      })
    },

    loadResourceList() {
      this.$PnApi.ResourceApi.getMyPnResourceByPage(this.pageIndex, this.pageSize, this.currentSelectGroupId).then(result => {
        this.resourceList = result.data.payload.list
        this.pageTotal = result.data.payload.total
      })
    },

    openResourceGroupForm(type, id) {
      this.$refs.resourceGroupForm.init(type, id)
    },

    openUploadResourceModal() {
      this.$refs.uploadResourceModal.init()
    },

    selectGroup(id) {
      this.currentSelectGroupId = id
      this.loadResourceList()
    },

    deleteResourceGroup(id) {
      this.$Modal.confirm({
        title: '提醒',
        content: '删除后，分组下的资源将被移入未分组中，确认删除吗？',
        onOk: () => {
          this.$PnApi.ResourceApi.deletePnResourceGroup(id).then(result=>{
            if(result.data.success) {
              this.currentSelectGroupId = '';
              this.loadResourceList()
              this.loadResourceGroupList();
              this.$Message.success(result.data.message)
            }
          })
        }
      });
    },

    copyResourceRelativePath(path) {
      this.$PnUtil.copyToClipboard(path);
      this.$Message.success('路径（' + path + '）复制成功')
    },

    deletePnResource(id) {
      this.$Modal.confirm({
        title: '提醒',
        content: '确认删除此资源吗？',
        onOk: () => {
          this.$PnApi.ResourceApi.deletePnResource(id).then(result=>{
            if(result.data.success) {
              this.loadResourceList();
              this.$Message.success(result.data.message)
            }
          })
        }
      });
    },

  },
  computed: {},
  watch: {}
}
</script>

<style lang="less" scoped>
.resource-manage {
  height: 100%;

  .resource-group-container {
    float: left;
    width: 200px;
    height: 100%;

    .group-header {
      font-size: 14px;
    }

    .group-item {
      width: 100%;
      height: 30px;
      line-height: 30px;
      font-size: 13px;
      padding-left: 20px;
      cursor: pointer;
      background-color: #333333;
      border-radius: 3px;
      margin-bottom: 5px;
      position: relative;
      &.active {
        background-color: #2196F3;
      }
      &:hover {
        background-color: #2196F3;
      }
      &:hover .group-item-operation-wrap {
        display: block;
      }
      .group-item-operation-wrap {
        display: none;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0px;
        top: 0px;
        border-radius: 3px;
        text-align: right;
        padding-right: 10px;
      }
    }
  }

  .resource-container {
    float: left;
    width: calc(100% - 200px);
    height: 100%;
    padding: 0px 0px 15px 15px;
  }

  .page-card {
    width: 100%;
    border: 2px solid #424242;
    border-radius: 8px;
    background-color: #424242;
    position: relative;
    margin-bottom: 15px;

    &:hover {
      border-color: #2196f3;
      box-shadow: 2px 1px 20px #212121;
    }

    &:hover .footer .operation-wrap {
      display: block;
    }

    .img-wrap {
      width: 100%;
      height: 120px;
      background-color: #212121;
      position: relative;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
      padding: 10px;
      text-align: center;

      .page-thumbnail {
        height: 100%;
      }
    }

    .footer {
      width: 100%;
      background-color: #424242;
      border-bottom-left-radius: 8px;
      border-bottom-right-radius: 8px;
      padding: 12px 8px 12px 8px;
      position: relative;

      p {
        font-size: 13px;
      }

      .operation-wrap {
        display: none;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0px;
        top: 0px;
        background-color: rgba(0, 0, 0, 0.8);
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        text-align: center;

        .operation-btns-wrap {
          margin-top: 10px;

          .ivu-tooltip {
            &:first-child {
              margin-left: 0px;
            }

            margin-left: 10px;

            a {
              color: #fff;
              i {
                position: relative;
              }

              &:hover {
                color: #2196f3;
              }
            }
          }
        }
      }
    }
  }
}
</style>
